<template>
    <div class="login">
        <div class="loginbox">
            <div class="abbox1"></div>
            <div class="abbox2"></div>
            <div class='title'>后台登录</div>
            <div class="iptbox">
                <i class='iconfont icon-my_light'></i><input type="text" v-model="username" placeholder="请输入用户名">
            </div>
             <div class="iptbox">
                <i class='iconfont icon-lock'></i><input type="password" v-model="password" placeholder="请输入密码" @keyup.enter="login">
            </div>
            
            <button class='loginbtn'>登录</button>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                username:'',
                password:'',
            }
        },
        watch:{
            username(){
                if(this.username.length>20){
                    this.username = this.username.substring(0,20)
                }
            }
        },
        methods:{
            login(){

            }
        }
    }
</script>
<style lang="less" scoped>
.iconfont{
    font-size: 18px;
}
.login{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom right,#253647,#2d3a4b);
    overflow: hidden;
    .loginbox{
        box-shadow: 1px 1px 3px #eaeaea;
        width: 300px;
        margin:auto;
        margin-top:160px;
        background-color: #fff;
        padding:30px;
        border-radius:5px;
        position: relative;
        z-index: 1;
        .title{
            color:#727272;
            font-size: 18px;
            text-align: center;
            font-weight: 500;
            padding-bottom:10px;
            border-bottom:1px solid #eaeaea;
        }
        .iptbox{
            margin-top:20px;
            height: 36px;
            line-height: 34px;
            width: 290px;
            box-shadow: 1px 1px 2px #eaeaea;
            padding:0 5px;
            border-radius:4px;
            border:1px solid #999;
            input{
                display: inline-block;
                font-size: 16px;
                border:0px;
                padding:0;
                height: 34px;
                margin:0;
                width: 260px;
                outline: none;
                background-color: #fff;
                text-indent: 10px;
                vertical-align: top;
            }
        }
        .loginbtn{
            margin-top:20px;
            font-size:16px;
            border:0;
            height: 40px;
            width: 300px;
            border-radius:4px;
            background-color: #409eff;
            transition: all .1s;
            color:#fff;
        }
        .loginbtn:hover{
            cursor: pointer;
            background-color: #66b1ff;
        }
        .abbox1{
            top:-10px;
            left:20px;
            border-radius:4px;
            position: absolute;
            width: 320px;
            height: 100px;
             background-color: rgba(255,255,255,.9);
              z-index: -1;
        }
        .abbox2{
            top:-20px;
            left:40px;
            border-radius:4px;
            position: absolute;
            width: 280px;
            height: 100px;
             z-index: -1;
            background-color: rgba(255,255,255,.8);
        }
    } 
}
</style>


